(function () {

    $.fn.extend({
        _navSwiper() {
            class Swiper {
                constructor(el) {
                    //属性
                    this.el = el;
                    this.oUl = this.el.find("ul").eq(0);
                    //span的div
                    this.oOl = this.el.find("ol").eq(0);
                    //上面图片的下标
                    this.imgIndex = 0;
                    //下面span的下标
                    this.pointIndex = 0;
                    //定时器
                    this.timer = setInterval(() => {
                        this.imgIndex++;
                        this.pointIndex++;
                        this.autoplay()
                    }, 2000)
                    //调用的方法
                    this.init();
                    this.autoplay();
                    this.mouseEvent();
                    this.clickEvent();
                }

                //方法
                //初始化方法
                init() {
                    //克隆第一个li标签追加到ul最后一个位置
                    let $cloneLi = this.oUl.children().eq(0).clone(true);
                    $cloneLi.appendTo(this.oUl);
                    console.log(this.oUl);
                    //遍历时动态创建span追加到下面的div里,上面图片加1,下面span减一
                    for (var i = 0; i < this.oUl.children().length - 1; i++) {
                        let $olLi = $(`<li class=${i == 0 ? 'current' : ''}>${i + 1}</li>`)
                        $olLi.appendTo(this.oOl);
                    }

                }

                //自动播放方法
                autoplay() {
                    //判断下标是否大于照片减一,大于则下标为0,并且动作的元素位置也为0
                    if (this.imgIndex > 7) {
                        this.imgIndex = 1;
                        this.oUl.css({
                            left: 0
                        })
                    }
                    //再给元素添加动画
                    this.oUl.animate({
                        left: this.imgIndex * -607
                    })
                    //让下面的点跟着移动
                    //判断下面的下标是==于图片减一的值,等于则下标为0开始
                    if (this.pointIndex == 7) {
                        this.pointIndex = 0;
                    }
                    //给这个下标添加类名,其他的则删除类名
                    this.oOl.children().eq(this.pointIndex).addClass("current").siblings().removeClass("current")
                }

                //鼠标事件
                mouseEvent() {
                    //进入,暂停定时器
                    //离开,开启定时器
                    this.oUl.on("mouseenter", () => {
                        clearInterval(this.timer)
                    }).on("mouseleave", () => {
                        this.timer = setInterval(() => {
                            this.imgIndex++;
                            this.pointIndex++;
                            this.autoplay()
                        }, 2000)
                    })
                }

                //点击事件
                clickEvent() {
                    let self = this;
                    //使点击的下标和图片以及span的下标相等,调用播放方法
                    this.oOl.on("click", "li", function (e) {
                        let $index = $(this).index();
                        self.imgIndex = self.pointIndex = $index;
                        self.autoplay()
                        console.log(111);
                    })
                }
            }
            new Swiper(this)
        }
    })
})()

$(function () {
    $(".bto")._navSwiper();
})